<script setup>
import * as api from "@/api/v-msg-service/sms-manage/sms-template";
import { listSmsAccountSignature } from "@/api/v-msg-service/sms-manage/sms-signature";

const emits = defineEmits([
  'query',
  'update:modelValue'
])

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => {}
  }
})

const signatureList = ref([])

const formData = ref({
  id: '',
  code: '',//模板CODE
  name: '',//模板名称
  content: '',//模板内容
  templateCode: '',//标准模板代码
  signatureId: '',//短信签名
})

const saveBtnLoading = ref(false)
const formRef = ref()

const rules = ref({
  code: [{ required: true, message: '请输入模板code', trigger: 'blur' }],
  name: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  content: [{ required: true, message: '请输入短信内容', trigger: 'blur' }],
  templateCode: [{ required: true, message: '请输入模板名称', trigger: 'blur' }],
  signatureId: [{ required: true, message: '请选择短信签名', trigger: 'change' }],
})
const visible = computed(
    {
      get(){
        return props.modelValue
      },
      set(val){
        emits('update:modelValue',val)
      }
    }
)

const title = computed(
    () => {
      return props.rowData && props.rowData.id ? '编辑模板' : '新增模板'
    }
)
watch(
    props.rowData,
    (val) =>{
      if (val && val.id) Object.assign(formData.value,val)
    },
    {
      immediate: true,
    }
)
onMounted(()=>{
  init()
})
const init = () => {
  init_Cache()
}
const init_Cache = () => {
  listSmsAccountSignature().then(({data}) => {
    signatureList.value = data
  })
}

const sure = () => {
  formRef.value.validate(async (valid) => {
    if (valid) {
      saveBtnLoading.value = true
      const { code } = await api.save(formData.value)
      saveBtnLoading.value = false
      if (code === 200){
        visible.value = false
        ElMessage({message: '保存成功', type: 'success',})
        emits('query')
      }
    }
  })
}
</script>

<template>
  <v-dialog v-model="visible" :loading="saveBtnLoading" :title="title" @sure="sure">
    <el-form ref="formRef" :model="formData" :rules="rules" label-width="110px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="模板CODE：" prop="code">
            <el-input v-model="formData.code" placeholder="请输入模板CODE"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="模板名称：" prop="name">
            <el-input v-model="formData.name" placeholder="请输入模板名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="标准模板：" prop="templateCode">
            <el-input v-model="formData.templateCode" placeholder="请输入标准模板"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="短信签名：" prop="signatureId">
            <el-select
                v-model="formData.signatureId"
                placeholder="请选择短信签名">
              <el-option
                  v-for="item in signatureList"
                  :key="item.id"
                  :label="item.signName"
                  :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="模板内容：" prop="content">
            <el-input type="textarea" v-model="formData.content" placeholder="请输入模板内容"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </v-dialog>
</template>

<style scoped lang="scss">
.el-select {
  width: 100%;
}
.tips {
  font-size: 13px;
  margin-left: 20px;
  margin-bottom: 10px;
  color: #999999;
}
</style>